<template>
	<view class="user-box">
		<view class="user-info">
			<view class="user-image">
				<button class="avatar-login-btn" @click="getLogin">
					<image :src="userInfo.avatarUrl" mode="widthFix" class="avatar-img"></image>
				</button>
			</view>
			<view class="info" @click="gotoPath('/pages/userInfo/userInfo')">
				<view class="tit">
					{{userInfo.nickName}}
				</view>
				<view class="jy">
					当前经验值：<text style="color: blue;">0</text>
				</view>
				<view class="jd">
					<ProgressBar :progress="Math.min(Math.round((1 / 30) * 100), 100)" bar-height="8rpx" bg-color="#fff"
						fill-color="#ffd18b"></ProgressBar>
				</view>
				<view class="tags">
					<text class="tag">
						LV.1初入江湖
					</text>
					<text class="tag">
						打手
					</text>
				</view>
			</view>
			<view class="setting" @click="gotoPath('/pages/setting/setting')">
				<uni-icons type="gear-filled" size="24"></uni-icons>
			</view>
		</view>

		<view class="user-order">
			<view class="user-order-tit">
				<view class="tit">
					陪玩订单
				</view>
				<view class="all">
					全部
				</view>
			</view>
			<view class="user-order-list">
				<view class="user-order-item" @click="gotoPath('/pages/order/order')">
					<view class="order-image">
						<image src="/static/dfk.png" mode="widthFix"></image>
					</view>
					<view class="order-tit">
						待付款
					</view>
				</view>

				<view class="user-order-item" @click="gotoPath('/pages/order/order')">
					<view class="order-image">
						<image src="/static/djd.png" mode="widthFix"></image>
					</view>
					<view class="order-tit">
						待接单
					</view>
				</view>

				<view class="user-order-item" @click="gotoPath('/pages/order/order')">
					<view class="order-image">
						<image src="/static/dpl.png" mode="widthFix"></image>
					</view>
					<view class="order-tit">
						待评论
					</view>
				</view>
			</view>
		</view>

		<view class="user-order">
			<view class="user-order-tit">
				<view class="tit">
					寄售订单
				</view>
				<view class="all">
					全部
				</view>
			</view>
			<view class="user-order-list">
				<view class="user-order-item" @click="gotoPath('/pages/consignmentSales/consignmentSales')">
					<view class="order-image">
						<image src="/static/dfk1.png" mode="widthFix"></image>
					</view>
					<view class="order-tit">
						待付款
					</view>
				</view>

				<view class="user-order-item" @click="gotoPath('/pages/consignmentSales/consignmentSales')">
					<view class="order-image">
						<image src="/static/dfh.png" mode="widthFix"></image>
					</view>
					<view class="order-tit">
						待发货
					</view>
				</view>

				<view class="user-order-item" @click="gotoPath('/pages/consignmentSales/consignmentSales')">
					<view class="order-image">
						<image src="/static/dsh.png" mode="widthFix"></image>
					</view>
					<view class="order-tit">
						待收货
					</view>
				</view>
			</view>
		</view>

		<view class="user-option">
			<view class="option-item" v-for="item in optionList" :key="item.key" @click="gotoPath(item.url)">
				<view class="option-image">
					<image :src="item.iconUrl" mode="widthFix"></image>
				</view>
				<view class="option-tit">
					{{item.name}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		miniLogin
	} from "@/api/user/user.js"
	export default {
		data() {
			return {
				optionList: [{
						name: "我的商品",
						url: "/pages/myShop/myShop",
						key: "1",
						iconUrl: "/static/commodity.png"
					},
					{
						name: "打手入驻",
						url: "/pages/enter/enter",
						key: "2",
						iconUrl: "/static/group_fill.png"
					},
					{
						name: "抢单大厅",
						url: "/pages/enter/enter",
						key: "3",
						iconUrl: "/static/preempt.png"
					},
					{
						name: "收藏商品",
						url: "/pages/collectShop/collectShop",
						key: "4",
						iconUrl: "/static/collection.png"
					},
					{
						name: "我的钱包",
						url: "/pages/myWallet/myWallet",
						key: "5",
						iconUrl: "/static/transaction_fill.png"
					},
					{
						name: "通知设置",
						url: "/pages/informSetting/informSetting",
						key: "6",
						iconUrl: "/static/remind.png"
					},
					{
						name: "用户协议",
						url: "/pages/agreement/agreement",
						key: "7",
						iconUrl: "/static/document.png"
					},
					{
						name: "隐私协议",
						url: "/pages/agreementYs/agreementYs",
						key: "8",
						iconUrl: "/static/shielding.png"
					}
				],
				userInfo: {
					avatarUrl: 'http://download.828ql.com/resource/upload/2456820/logo3.png',
					nickName: "未登录"
				}
			}
		},
		methods: {
			gotoPath(url) {
				uni.navigateTo({
					url
				})
			},

			async getLogin() {
				try {
					const userProfileRes = await uni.getUserProfile({
						desc: '用于完善用户信息'
					});

					const {
						encryptedData,
						iv,
						userInfo
					} = userProfileRes;
					if (!encryptedData || !iv) {
						uni.showToast({
							title: '获取用户信息失败',
							icon: 'none'
						});
						return;
					}
					
					this.userInfo.nickName = userInfo.nickName;
					this.userInfo.avatarUrl = userInfo.avatarUrl

					const {
						code
					} = await uni.login({
						provider: 'weixin'
					});
					if (!code) {
						uni.showToast({
							title: '获取code失败',
							icon: 'none'
						});
						return;
					}

					const res = await miniLogin({
						code,
						encrypted_data: encryptedData,
						iv,
						nickname: userInfo.nickName,
						avatar_url: userInfo.avatarUrl
					});

					uni.setStorageSync('token', res.data.token);
					uni.setStorageSync('userInfo', res.data.user);

					uni.showToast({
						title: '登录成功',
						icon: 'none'
					});

				} catch (err) {
					console.error('登录出错：', err);
					if (err.errMsg?.includes('deny')) {
						uni.showToast({
							title: '请允许授权以完成登录',
							icon: 'none'
						});
					} else {
						uni.showToast({
							title: '登录失败',
							icon: 'none'
						});
					}
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.user-box {
		box-sizing: border-box;
		padding: 20rpx;

		.user-info {
			display: flex;
			margin-bottom: 50rpx;
			padding-top: 30rpx;

			.user-image {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				font-size: 0px;
				overflow: hidden;
			}

			.info {
				margin: 0px 20rpx;
				flex: 1;

				.tit {
					font-size: 28rpx;
					font-weight: 700;
				}

				.jy {
					font-size: 24rpx;
					margin: 10rpx 0px;
				}

				.jd {
					margin-bottom: 8rpx;
				}

				.tags {
					.tag {
						font-size: 20rpx;
						background-color: red;
						color: #fff;
						padding: 2px 20rpx;
						border-radius: 40rpx;
						margin-right: 15rpx;
					}
				}
			}

			.setting {
				font-size: 24rpx;
			}
		}

		.user-order {
			background-color: #fff;
			border-radius: 16rpx;
			box-sizing: border-box;
			padding: 20rpx;
			margin-top: 30rpx;

			.user-order-tit {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 20rpx;
				font-size: 26rpx;
				border-bottom: 1px #f9f9f9 solid;
				padding-bottom: 20rpx;

				.tit {
					font-weight: 700;
				}

				.all {
					color: #999;
				}
			}

			.user-order-list {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.user-order-item {
					flex: 1;
					display: flex;
					align-items: center;
					flex-direction: column;
					justify-content: center;

					.order-image {
						width: 80rpx;
						height: 80rpx;
						font-size: 0px;
						margin-bottom: 8rpx;
					}

					.order-tit {
						font-size: 26rpx;
					}
				}
			}
		}

		.user-option {
			display: flex;
			flex-wrap: wrap;
			margin-top: 40rpx;

			.option-item {
				width: 25%;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				margin-bottom: 30rpx;

				.option-image {
					width: 45rpx;
					height: 45rpx;
					font-size: 0px;
					margin-bottom: 10rpx;
				}

				.option-tit {
					font-size: 24rpx;
				}
			}
		}
	}
</style>